<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据绑定</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			小结
			Vue中有两种数据绑定方式：
			1.v-bind:单向绑定，数据只能从data流向页面
			2.v-model:双向绑定，数据不仅能从data流向页面，还可以从页面流向data
				备注：
				1.双向绑定一般用在表单类元素上(如：input,select等)。
				2.v-model:value 可以简写为v-model，因为v-model默认
				  的就是元素的value属性的值。
		 -->
		<!-- 创建容器 -->
		<div id="root">
			<!-- 普通写法 -->
			单向数据绑定：<input type="text" v-bind:value="name" />
			双向数据绑定: <input type="text" v-model:value="name" />
			
			<!-- 简写 -->
			单向数据绑定：<input type="text" :value="name" />
			双向数据绑定: <input type="text" v-model="name"/>
			
		
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false//阻止生产提示
			
			//创建vue实例
			new Vue({
				el:'#root',//el用于绑定id为root的容器
				data:{//data存储数据，el指定容器
					name:'上硅谷',
				}
			})
			
		</script>
		
	</body>
</html>
